<template>
    <div class="dashboard-editor-container">
        <el-row :gutter="10" type="flex" style="flex-wrap: wrap; flex-direction: row">
            <el-col :span="6" style="margin-bottom: 10px;">
                <eventLeverVue :DataList="HardwareStatus" title="资产类型统计"></eventLeverVue>
            </el-col>
            <el-col :span="12" style="margin-bottom: 10px;">
                <eventTop :chartData="Department" title="资产部门统计(Top 10)"></eventTop>
            </el-col>
            <el-col :span="6" style="margin-bottom: 10px;">
                <eventLeverVue :DataList="CoreDevice" title="核心占比"></eventLeverVue>
            </el-col>
            <el-col :span="12">
                <eventTrends :chartData="OSDetail" title="操作系统分布(Top 10)"></eventTrends>
            </el-col>
            <el-col :span="12">
                <eventTrends :chartData="DeviceType" title="设备类型统计(Top 10)"></eventTrends>
            </el-col>
        </el-row>
    </div>
</template>

<script>

import eventTop from './components/eventTop.vue'
import eventLeverVue from './components/eventLever.vue'
import eventTrends from './components/BarChart2.vue'  //柱状图

import { connrequest } from '@/api/firstPage';
export default {
    name: 'DashboardAdmin',
    components: {
        eventTop,
        eventLeverVue,
        eventTrends
    },
    filters: {},
    data() {
        return {
            layoutList: [],
            Device: [],
            Department: [],
            CoreDevice: [],
            DeviceType: {},
            OSDetail: {},
            HardwareStatus: []
        }
    },
    watch: {

    },
    created() {
    },
    mounted() {
        this.GetDeviceOverview()
    },
    methods: {
        async GetDeviceOverview() {
            const res = await connrequest('GetDeviceOverview')
            let HardMap = {
                1: '标准资产',
                2: '低配资产',
                3: '高龄资产',
                4: '高龄低配',
            }
            res.Data.CoreDevice.map(item => {
                item.Name = item.Name === "1" ? '普通' : '核心'
                return item
            })
            res.Data.HardwareStatus.map(item => {
                item.Name = HardMap[item.Name]
                return item
            })
            this.Device = res.Data.Device
            this.HardwareStatus = res.Data.HardwareStatus
            this.CoreDevice = res.Data.CoreDevice
            this.Department = res.Data.Department
            this.OSDetail = this.processData(res.Data.OSDetail)
            this.DeviceType = this.processData(res.Data.DeviceType)
        },
        processData(data) {
            let series = []
            let xAxis = []
            data.sort((a, b) => b.Count - a.Count).slice(0, 10).forEach(item => {
                series.push(item.Count)
                xAxis.push(item.Name)
            })
            return { series, xAxis }
        }
    }
}
</script>

<style lang="scss" scoped>
.el-row {
    margin-bottom: 12px;

    &:last-child {
        margin-bottom: 0;
    }
}

.el-col {
    border-radius: 4px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}

::v-deep .el-card__header {
    padding: 10px 10px 5px 10px !important;
    border-bottom: 0;
}

::v-deep .el-card__body {
    padding: 0 !important;
}
</style>